<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/ol.js"></script>

</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">
    /*   // 设置地图中心，此处进行坐标转换， 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标
     //[106.677, 36.7388]是下载地图的中心经纬度
     //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
     //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');


     //创建地图
     var map = new ol.Map({
     view: new ol.View({
     /!*            center: [508833, 299749],//地图中心位置
     //center:[503409, 305653],
     zoom: 18//地图初始层级*!/
     //center: [12956575, 4853684],//地图中心位置
     center:[508855, 297737],
     zoom: 18//地图初始层级
     }),
     target: 'map'
     });

     //给8位字符串文件名补0
     function zeroFill(num, len, radix) {
     var str = num.toString(radix || 10);
     while (str.length < len) {
     str = "0" + str;
     }
     return str;
     }

     // ol.source.XYZ添加瓦片地图的层
     var tileLayer = new ol.layer.Tile({
     source: new ol.source.XYZ({
     tileUrlFunction: function (coordinate) {
     //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
     var x = 'C' + zeroFill(coordinate[1], 8, 16);
     var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
     var z = 'L' + zeroFill(coordinate[0], 2, 10);
     //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
     return 'http://localhost:8080/tile/arcgissuggest/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
     },
     projection: 'EPSG:3857'
     })
     });
     map.addLayer(tileLayer);//添加到map里面

     /!*    map.addControl(new ol.control.ScaleLine());
     $("#map").click(function (e) {
     //alert('X ; '+ e.clientX  + 'Y: '+e.clientY);
     var t = map.getEventCoordinate(e);
     alert(t);
     })*!/*/

    var projection = ol.proj.get('EPSG:3857');
    // 瓦片地址
    // 瓦片地址格式：http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}
    var tileUrl = "http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer/tile/{z}/{y}/{x}";
    // 原点
    var origin = [ -2.00377E7 ,3.02411E7];
    //var origin = [509018 ,299803];
    // 分辨率
    var resolutions = [
        2.116670900008467,
        1.0583354500042335,
        0.5291677250021167,
        0.26458386250105836,
        0.13229193125052918,
        0.06614596562526459
    ];
    // 地图范围
    var fullExtent = [ 508609.7079405099,299415.4490000001,509204.2680308107,299922.62196192663];
    var tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin: origin,
        //extent: fullExtent,
        resolutions: resolutions
    });
    //给8位字符串文件名补0
    function zeroFill(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }
    // 瓦片数据源
    var tileArcGISXYZ = new ol.source.XYZ({
        tileGrid: tileGrid,
        projection: projection,
        tileUrlFunction: function (coordinate) {
            //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
            var x = 'C' + zeroFill(coordinate[1], 8, 16);
            var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
            var z = 'L' + zeroFill(coordinate[0], 2, 10);
            //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
            return 'http://localhost:8080/tile/arcgiscustom/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
        }
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            // 瓦片图层
            new ol.layer.Tile({
                source: tileArcGISXYZ
            })
        ],
        view: new ol.View({
            center:[509018, 299803],
            //resolutions: resolutions,

            //resolution: 2.116670900008467,
            projection: projection,
            //extent: fullExtent

            zoom: 17
        })
    });

    map.on('click', function(evt) {
        var coor=evt.coordinate;
        alert(coor);

    });

</script>

</body>
</html>